<template>
	<view class="info">
		<!-- 公司 -->
		<view class="flex flex-ai-c flex-jc-sb card">
			<view class="card-title">学校</view>
			<view class="flex flex-ai-c" @click="jump(`/pages/common/educational/school`)">
				<view class="text">{{info.detail.schoole ? info.detail.schoole : '请选择学校'}}</view>
				<u-icon name="arrow-right" color="#999999"></u-icon>
			</view>
		</view>
		<view class="flex flex-ai-c flex-jc-sb card">
			<view class="card-title">学位</view>
			<view class="flex flex-ai-c" @click="info.show = true">
				<view class="text">{{info.detail.degree ? info.detail.degree : '请选择学位'}}</view>
				<u-icon name="arrow-right" color="#999999"></u-icon>
			</view>
		</view>
		<view class="flex flex-ai-c flex-jc-sb card">
			<view class="card-title">默认学历</view>
			<u-switch v-model="info.detail.is_default" :active-value="1" :inactive-value="0" inactive-color="#666666"
				active-color="#000"></u-switch>
		</view>
	</view>

	<view class="btn btn-active flex flex-ai-c flex-jc-c" v-if="isBtn" @click="save">
		保 存
	</view>
	<view class="btn flex flex-ai-c flex-jc-c" v-else>
		保 存
	</view>

	<u-picker @confirm="confirm" v-model="info.show" mode="selector" :range="info.selectorObj" range-key="education" cancel-color="#000" confirm-color="#000" title="选择职务"></u-picker>
</template>

<script setup lang="ts">
	import {
		reactive, ref, watch
	} from 'vue'
	import {
		onLoad,onShow
	} from '@dcloudio/uni-app'
	import common from '../../../api/common'
	import user from '../../../api/user'
	let info = reactive({
		detail: {
			schoole: '',
			degree: '',
			is_default: 0
		},
		id: '',
		show: false,
		selectorObj: []
	})
	let isBtn = ref(true)
	watch(info.detail, () => {
		changeBtn()
	}, { deep: true })
	const changeBtn = () => {
		let l = Object.values(info.detail)
		for (let i = 0; i < l.length; i++) {
			if (l[i] === '') {
				isBtn.value = false
				break
			}
			isBtn.value = true
		}
	}
	const save = async () => {
		const res = await user.opEducation({
			id: '',
			...info.detail
		})
		if(res.code === 200) {
			uni.navigateBack()
		}
	}
	const jump = (url : string) => {
		uni.navigateTo({
			url: url
		})
	}
	const confirm = (e) => {
		let i = e[0]
		info.detail.degree = info.selectorObj[i].education
	}
	//学历列表
	const getEducation = async () => {
		const res = await common.getEducation()
		info.selectorObj = res.data
	}
	onLoad((op : any) => {
		if(op.info) {
			info.detail = JSON.parse(op.info)
		}
		changeBtn()
		getEducation()
	})
	const currPageVm = () => {
		let pages = getCurrentPages();
		let currPage = pages[pages.length - 1]; // 当前页的实例
		return currPage
	}
	onShow(() => {
		let v = currPageVm().$vm.value
		if (v) {
			info.detail.schoole = v.text
		}
	})
</script>
<style>
	page {
		background: #F8F8F8;
		height: 100%;
		border: 1px solid #F8F8F8;
	}
</style>
<style lang="scss" scoped>
	.info {
		height: 80%;
		margin: 20rpx 20rpx 0 20rpx;
	}

	.text {
		color: #999999;
		margin-right: 5rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 340rpx;
	}

	.card {
		padding: 0 30rpx;
		height: 90rpx;
		background: #fff;
		font-size: 28rpx;
		color: #666666;

		.card-title {
			color: #999999;
		}
	}

	.btn-active {
		background: #333333 !important;
		color: #fff !important;
	}

	.btn {
		position: fixed;
		bottom: 80rpx;
		height: 78rpx;
		background: #D8D8D8;
		border-radius: 39rpx;
		width: calc(100% - 74rpx);
		left: 37rpx;
		color: #fff;
		font-size: 32rpx;
	}
</style>